<template>
  <div class="MapDialog">
    <el-dialog
      width="800px"
      :visible="isShow"
      @close="changeIsShow"
    >
      <div
        class="XMark"
        @click="changeIsShow"
      ></div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'DepartmentMap',
  props: {
    isShow: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    changeIsShow() {
      this.$emit('update:isShow', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.MapDialog {
  ::v-deep .el-dialog {
    .el-dialog__header {
      display: none;
    }
    .el-dialog__body {
      width: 800px;
      height: 600px;
      background: url('../../../assets/department_map.png');
      background-size: 800px 600px;
      .XMark {
        position: absolute;
        width: 40px;
        height: 40px;
        right: 15px;
        top: 15px;
        cursor: pointer;
      }
    }
  }
}
</style>
